<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fast Layer 功能示例</title>
    <link rel="stylesheet" href="fats/fast.css">
    <style>
        /* 示例页面样式 */
        .example-section {
            margin-bottom: 30px;
            padding: 20px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .example-title {
            font-size: 18px;
            color: #2d8cf0;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .example-desc {
            color: #666;
            margin-bottom: 15px;
            font-size: 14px;
            line-height: 1.6;
        }

        .example-code {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-family: monospace;
            white-space: pre;
            overflow-x: auto;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn:hover {
            background: #f5f5f5;
        }

        .btn-primary {
            color: #fff;
            background: #2d8cf0;
            border-color: #2d8cf0;
        }

        .btn-primary:hover {
            background: #57a3f3;
            border-color: #57a3f3;
        }

        .btn-success {
            color: #fff;
            background: #19be6b;
            border-color: #19be6b;
        }

        .btn-success:hover {
            background: #47cb89;
            border-color: #47cb89;
        }

        .btn-warning {
            color: #fff;
            background: #ff9900;
            border-color: #ff9900;
        }

        .btn-warning:hover {
            background: #ffad33;
            border-color: #ffad33;
        }

        .example-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 15px;
        }

        .example-table th,
        .example-table td {
            padding: 10px;
            border: 1px solid #eee;
            text-align: left;
        }

        .example-table th {
            background: #f8f8f8;
        }

        .tag {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 5px;
        }

        .tag-default { background: #f0f0f0; }
        .tag-primary { background: #e1f0ff; color: #2d8cf0; }
        .tag-success { background: #e8f9f0; color: #19be6b; }
    </style>
</head>
<body style="padding: 20px; background: #f5f5f5;">
    <div style="max-width: 1200px; margin: 0 auto;">
        <h1 style="margin-bottom: 30px; color: #333;">Fast Layer 功能示例</h1>

        <!-- 基础弹窗 -->
        <div class="example-section">
            <h2 class="example-title">基础弹窗</h2>
            <p class="example-desc">展示基本的弹窗类型，包括提示框、确认框和消息提示。</p>
            <div class="example-code">// 提示框
fast.alert('这是一个提示框');

// 确认框
fast.confirm('确定要执行此操作吗？', {
    title: '确认操作',
    btn: ['确定', '取消']
});

// 消息提示
fast.msg('操作成功', {
    time: 2000,
    icon: 1
});</div>
            <div class="btn-group">
                <button class="btn" onclick="showBasicAlert()">提示框</button>
                <button class="btn" onclick="showBasicConfirm()">确认框</button>
                <button class="btn" onclick="showBasicMsg()">消息提示</button>
            </div>
        </div>

        <!-- 加载层 -->
        <div class="example-section">
            <h2 class="example-title">加载层</h2>
            <p class="example-desc">展示不同样式的加载动画。</p>
            <table class="example-table">
                <tr>
                    <th>类型</th>
                    <th>说明</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><span class="tag tag-default">默认</span></td>
                    <td>圆形旋转加载动画</td>
                    <td><button class="btn" onclick="showLoading(0)">显示</button></td>
                </tr>
                <tr>
                    <td><span class="tag tag-primary">双环</span></td>
                    <td>双环旋转加载动画</td>
                    <td><button class="btn" onclick="showLoading(1)">显示</button></td>
                </tr>
                <tr>
                    <td><span class="tag tag-success">三点</span></td>
                    <td>三点弹跳加载动画</td>
                    <td><button class="btn" onclick="showLoading(2)">显示</button></td>
                </tr>
            </table>
        </div>

        <!-- 高级功能 -->
        <div class="example-section">
            <h2 class="example-title">高级功能</h2>
            <p class="example-desc">展示拖拽、缩放、最大化等高级功能。</p>
            <div class="example-code">fast.open({
    type: 1,
    title: '高级功能示例',
    content: '自定义内容...',
    area: ['500px', '400px'],
    maxmin: true,
    resize: true,
    drag: true
});</div>
            <div class="btn-group">
                <button class="btn btn-primary" onclick="showAdvancedFeatures()">打开高级功能示例</button>
            </div>
        </div>

        <!-- 特殊功能 -->
        <div class="example-section">
            <h2 class="example-title">特殊功能</h2>
            <p class="example-desc">展示特殊功能，如RTL支持、自定义动画等。</p>
            <div class="btn-group">
                <button class="btn" onclick="showRTLExample()">RTL模式</button>
                <button class="btn" onclick="showCustomAnimation()">自定义动画</button>
                <button class="btn" onclick="showCustomStyle()">自定义样式</button>
            </div>
        </div>
    </div>

    <script src="fats/fast.js"></script>
    <script>
        // 基础弹窗示例
        function showBasicAlert() {
            fast.alert('这是一个基础的提示框', {
                title: '提示',
                icon: 1
            });
        }

        function showBasicConfirm() {
            fast.confirm('确定要执行此操作吗？', {
                title: '确认操作',
                btn: ['确定', '取消']
            }, function() {
                fast.msg('您点击了确定', {icon: 1});
            }, function() {
                fast.msg('您点击了取消', {icon: 2});
            });
        }

        function showBasicMsg() {
            // 成功消息
            fast.msg('操作成功', {
                time: 2000,
                icon: 1
            });

            // 延迟显示错误消息
            setTimeout(() => {
                fast.msg('操作失败，请重试', {
                    time: 2000,
                    icon: 2
                });
            }, 1000);

            // 延迟显示普通消息
            setTimeout(() => {
                fast.msg('这是一条普通消息');
            }, 2000);
        }

        // 加载层示例
        function showLoading(type) {
            const loadingTexts = [
                '加载中...',
                '处理中...',
                '请稍候...'
            ];
            const loadIndex = fast.load(type, {
                text: loadingTexts[type],
                shade: 0.3
            });
            setTimeout(() => {
                fast.close(loadIndex);
                fast.msg('加载完成', {icon: 1});
            }, 3000);
        }

        // 高级功能示例
        function showAdvancedFeatures() {
            fast.open({
                type: 1,
                title: '高级功能示例',
                content: `
                    <div style="padding: 20px;">
                        <div class="dialog-options">
                            <label style="margin-right: 15px;">
                                <input type="checkbox" onchange="toggleDrag(this)"> 启用拖拽
                            </label>
                            <label>
                                <input type="checkbox" onchange="toggleResize(this)"> 启用大小调整
                            </label>
                        </div>
                        <div style="margin-top: 15px;">
                            <p>• 可以通过右上角按钮最大化/最小化</p>
                            <p>• 可以通过上方选项开启拖拽和大小调整</p>
                        </div>
                    </div>
                `,
                area: ['500px', '300px'],
                maxmin: true,
                shade: 0.3,
                anim: 4
            });
        }

        // 特殊功能示例
        function showRTLExample() {
            const originalDir = document.documentElement.dir;
            document.documentElement.dir = 'rtl';
            
            fast.alert('مرحبا بالعالم', {
                title: 'تنبيه',
                btn: ['موافق'],
                end: function() {
                    document.documentElement.dir = originalDir;
                }
            });
        }

        function showCustomAnimation() {
            const animations = ['fade', 'zoom', 'slide', 'flip', 'bounce', 'rotate'];
            let currentAnim = 0;

            function showNext() {
                if (currentAnim >= animations.length) return;
                fast.msg(`这是 ${animations[currentAnim]} 动画`, {
                    time: 1500,
                    anim: currentAnim,
                    end: function() {
                        currentAnim++;
                        setTimeout(showNext, 500);
                    }
                });
            }

            showNext();
        }

        function showCustomStyle() {
            fast.open({
                type: 1,
                title: '自定义样式',
                content: `
                    <div style="padding: 20px; text-align: center;">
                        <div style="margin-bottom: 20px;">
                            <span class="tag tag-primary">自定义背景</span>
                            <span class="tag tag-success">自定义边框</span>
                            <span class="tag tag-default">自定义动画</span>
                        </div>
                        <p>这是一个自定义样式的弹窗示例</p>
                    </div>
                `,
                skin: 'demo-custom-skin',
                area: ['400px', 'auto'],
                shade: 0.6,
                anim: 2
            });
        }

        // 添加更多消息示例
        function showMoreMsgs() {
            fast.msg('短消息测试', {icon: 1});
            
            setTimeout(() => {
                fast.msg('这是一条较长的消息，测试自适应宽度', {
                    icon: 1,
                    time: 3000
                });
            }, 500);

            setTimeout(() => {
                fast.msg('带有自定义时间的消息', {
                    icon: 6,
                    time: 4000
                });
            }, 1000);
        }

        // 示例：带抖动效果的错误消息
        fast.msg('操作失败，请重试', {
            time: 2000,
            icon: 2,
            shake: true  // 启用抖动效果
        });

        // 示例：多种效果组合
        function showErrorWithShake() {
            fast.msg('验证失败', {
                icon: 2,
                time: 2000,
                shake: true,
                skin: 'fast-msg-error'
            });
        }
    </script>
</body>
</html>
